<template>
    <div class="app-container">
        <!-- 查询条件开始 -->
        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="88px">
            <el-form-item label="公告标题" prop="noticeTitle">
                <el-input
                        v-model="queryParams.noticeTitle"
                        placeholder="请输入通知公告标题"
                        clearable
                        size="small"
                        style="width:240px"
                />
            </el-form-item>
            <el-form-item label="发布者" prop="createBy">
                <el-input
                        v-model="queryParams.createBy"
                        placeholder="请输入发布者"
                        clearable
                        size="small"
                        style="width:240px"
                />
            </el-form-item>
            <el-form-item label="类型" prop="noticeType">
                <el-select
                        v-model="queryParams.noticeType"
                        placeholder="类型"
                        clearable
                        size="small"
                        style="width:240px"
                >
                    <el-option
                            v-for="dict in noticeTypeOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-select
                        v-model="queryParams.status"
                        placeholder="可用状态"
                        clearable
                        size="small"
                        style="width:240px"
                >
                    <el-option
                            v-for="dict in statusOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="initNotice() ">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 查询条件结束 -->
        <!-- 表格工具按钮开始 -->
        <el-row :gutter="10" style="margin-bottom: 8px;">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple">删除</el-button>
            </el-col>
        </el-row>
        <!-- 表格工具按钮结束 -->

        <!-- 数据表格开始 -->
        <el-table  border :data="noticeTableList" >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="科室ID" align="center" prop="noticeId" />
            <el-table-column label="科室名称" align="center" prop="noticeTitle" />
            <el-table-column label="类型" prop="noticeType" align="center" :formatter="noticeTypeFormatter" />
            <el-table-column label="状态" prop="status" align="center" :formatter="statusFormatter" />
            <el-table-column label="创建时间" align="center" prop="createTime" />
            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button type="text" icon="el-icon-delete" size="mini"@click="delPro(scope.row.noticeId)" >删除</el-button>
                    <el-button type="text" icon="el-icon-view" size="mini" @click="handleView(scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 数据表格结束 -->
        <!-- 分页控件开始 -->
        <el-pagination
                v-show="total>0"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 30]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
        />
        <!-- 分页控件结束 -->
        <!-- 添加修改弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="open"
                width="800px"
                center
                append-to-body
        >
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="标题" prop="noticeTitle">
                            <el-input v-model="form.noticeTitle" placeholder="请输入通知公告标题" clearable size="small" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="状态" prop="status">
                            <el-radio-group v-model="form.status">
                                <el-radio
                                        v-for="dict in statusOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue"
                                >{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="类型" prop="noticeType">
                            <el-radio-group v-model="form.noticeType">
                                <el-radio
                                        v-for="dict in noticeTypeOptions"
                                        :key="dict.dictValue"
                                        :label="dict.dictValue"
                                        :value="dict.dictValue"
                                >{{ dict.dictLabel }}</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="公告内容">
                            <mavon-editor
                                    ref="noticeContent"
                                    v-model="form.noticeContent"
                                    height="300px"
                                    :options="{hideModeSwitch:true,previewStyle:'tab'}"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入备注" clearable size="small" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
        </el-dialog>
        <!-- 添加修改弹出层结束 -->
        <!--公告内容 弹出层开始 -->
        <el-dialog
                :title="title"
                :visible.sync="noticeContentOpen"
                width="800px"
                center
                append-to-body
        >
            <mavon-editor ref="noticeContent" v-model="noticeContent" :aria-disabled="true" :options="{hideModeSwitch:true,previewStyle:'tab'}" />
        </el-dialog>
        <!-- 公告内容弹出层结束 -->
    </div>
</template>

<script>
    import qs from "qs";
    export default {
        name: "Notice",
        data(){
        return {
            // 是否启用遮罩层
            loading: false,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 分页数据总条数
            total: 0,
            // 字典表格数据
            noticeTableList: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            // 状态数据字典
            statusOptions: [],
            // 公告类型
            noticeTypeOptions: [],
            // 日期范围
            dateRange: [],
            // 查询参数
            currentPage: 1,
            pageSize: 5,
            queryParams: {
                noticeTitle: undefined,
                createBy: undefined,
                noticeType: undefined,
                status: undefined
            },
            // 表单数据
            form: {},
            // 表单校验
            rules: {
                noticeTitle: [
                    { required: true, message: '通知公告标题不能为空', trigger: 'blur' }
                ]
            },
            // 查看内容的弹出层
            noticeContentOpen: false,
            // 查看内容
            noticeContent: undefined
        }
    },
        created() {
            this.initNotice()
            this.initStatus()
            this.initNoticeType()
        },
        methods:{

            // 打开修改的弹出层
            handleView(row) {
                this.title = row.noticeTitle
                this.noticeContentOpen = true
                this.noticeContent = row.noticeContent
            },
            //修改弹出框
            handleUpdate(row){
                this.open=true;
                this.form=JSON.parse(JSON.stringify(row));
            },
            //添加弹出框
            handleAdd(){
                this.open=true;
                this.form={};
            },
            handleSubmit(){
                this.$refs.form.validate((valid)=>{
                    if (valid){
                        this.$axios.post("/system/api/notice/saveAndUpdate",qs.stringify(this.form)).then(result=>{
                            if (result.data.data){
                                this.$message.success("添加成功")
                                this.open=false
                                this.form={}
                                this.initNotice()
                            }else {
                                this.$message.error("添加失败");
                            }
                        })
                    }else {
                        console.log('error submit!!')
                        return false
                    }
                })
            },
            // 取消
            cancel() {
                this.open = false
                this.title = ''
            },
            // 删除操作
            delPro(obj){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$axios.delete(`/system/api/notice/delById/${obj}`).then(result=>{
                        if (result.data.data){
                            // alert(result.data.t); // 测试弹出获取的数据信息,返回true/false
                            this.initNotice();
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }else {
                            this.$message({
                                type: 'error',
                                message: '删除失败!'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message.error({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //查询所有通知
            initNotice(){
                this.$axios.post("/system/api/notice/searchNotice/"+this.currentPage+"/"+this.pageSize,this.queryParams,this.dateRange).then(result=>{
                    this.noticeTableList=result.data.data.records;
                    this.total=result.data.data.total;
                })
            },
            // 分页pageSize变化时触发
            handleSizeChange(val) {
                this.pageSize = val
                // 重新查询
             this.initNotice()

            },
            // 点击上一页  下一页，跳转到哪一页面时触发
            handleCurrentChange(val) {
                this.currentPage = val
                // 重新查询
                this.initNotice()
            },
            //状态解析
            statusFormatter(row) {
                let v = row.status;
                return this.formatDict(this.statusOptions, v);
            },
            //类型
            noticeTypeFormatter(row){
                let v=row.noticeType;
                return this.formatDict(this.noticeTypeOptions, v)
            },

            //初始化状态
            initStatus() {
                this.$axios.get("/system/api/dict/data/findByType/sys_normal_disable").then(result => {
                    this.statusOptions = result.data.data;
                })
            },
            //初始化类型
            initNoticeType() {
                this.$axios.get("/system/api/dict/data/findByType/sys_notice_type").then(result => {
                    this.noticeTypeOptions = result.data.data;
                })
            },


        },


    }

</script>

<style scoped>

</style>
